<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        window.onload = function () {

            /*
                onmousewheel 鼠标滚轮滚动事件，会在滚轮滚动时触发，
                但是火狐不支持

                在火狐中要使用，DOMMouseScroll 来绑定滚动事件
            */
            var box1 = document.getElementById("box1");
            box1.onmousewheel = function (event) {
                event =event || window.event;
                /*
                    当鼠标滚轮向下滚动时，box1变长
                    当滚轮向上滚动时，box1变短
                */
                //判断滚轮的方向
                //event.wheelDelta 可以获取鼠标滚轮滚动的方向
                //向上120 向下-120
                //这个值只看正负，不看大小
                // alert(event.wheelDelta);
                //在火狐中使用 event.detail来获取滚动的方向
                //向上滚是-3 向下滚是3
                // alert(event.detail);

                if(event.wheelDelta>0 || event.detail<0){
                    //向上滚，box1变短
                    box1.style.height=box1.clientHeight - 10+"px";
                }else{
                    //向下滚，box1变长
                    box1.style.height=box1.clientHeight + 10+"px";
                }

                /*
                    使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
                    需要使用event来取消默认行为event.preventDefault();
                    IE8 不支持
                */
                event.preventDefault && event.preventDefault();
                /*
                    当滚轮滚动时，如果浏览器由滚动条，滚动条会随之滚动，
                    这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
                */
                return false;
            };
        }
    </script>
</head>

<body>
    <div id="box1"></div>
</body>

</html>